<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="../js/jquery.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style lang="scss" scoped>
		.seamless-warp {
			height: 500px;
			overflow: hidden;
			/* border: solid 1px black; */
		}
		.el-table__empty-block{
			display:none;
		}
	</style>
</head>


<body>
<div id="app">
	<h1 style="margin: 20px 45%; width: 200px;">物   业    报   修</h1>
	<br>
	<br>
	<br>
	<br>
	<el-table style="width: 100%; margin-left: 150px;">
		<el-table-column
				label="问题"
				width="350">
		</el-table-column>
		<el-table-column
				label="姓名"
				width="350">
		</el-table-column>
		<el-table-column
				label="地点"
				width="350">
		</el-table-column>
		<el-table-column
				label="具体地点"
				width="350">
		</el-table-column>
		<el-table-column
				label="时间"
				width="350">
		</el-table-column>
	</el-table>
	<vue-seamless-scroll :data="tableData" class="seamless-warp" style="margin-left: 150px;">
<!--		<ul class="item">-->
<!--			<li v-for="item in tableData">-->
<!--				<span class="title" v-text="item.id"></span><span class="date" v-text="item.type_NAME"></span>-->
<!--			</li>-->
<!--		</ul>-->
		<el-table
				:data="tableData"
				style="width: 100%; font-size: 18px;" class="item" :show-header="false">
<!--			<el-table-column-->
<!--					prop="id"-->
<!--					label="ID"-->
<!--					width="180">-->
<!--			</el-table-column>-->
			<el-table-column
					prop="type_NAME"
					label=""
					width="350">
			</el-table-column>
			<el-table-column
					prop="user_NAME"
					label=""
					width="350">
			</el-table-column>
			<el-table-column
					prop="storied"
					label=""
					width="350">
			</el-table-column>
			<el-table-column
					prop="address"
					label=""
					width="350">
			</el-table-column>
			<el-table-column
					prop="create_TIME"
					label=""
					width="350">
			</el-table-column>
		</el-table>
	</vue-seamless-scroll>
	</template>

</div>



</body>

<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js"></script>

<script>
	var content = new Vue({
		el: '#app',
		data: {
			orderInfo: [{
				'title': '无缝滚动第一行无缝滚动第一行',
				'date': '2017-12-16'
			}, {
				'title': '无缝滚动第二行无缝滚动第二行',
				'date': '2017-12-16'
			}, {
				'title': '无缝滚动第三行无缝滚动第三行',
				'date': '2017-12-16'
			}, {
				'title': '无缝滚动第四行无缝滚动第四行',
				'date': '2017-12-16'
			}, {
				'title': '无缝滚动第二行无缝滚动第二行',
				'date': '2017-12-16'
			}, {
				'title': '无缝滚动第三行无缝滚动第三行',
				'date': '2017-12-16'
			}, {
				'title': '无缝滚动第四行无缝滚动第四行',
				'date': '2017-12-16'
			}],
			tableData: [],
		},
		created() {
			this.getData();
		},
		mounted: function () {
			window.setInterval(() => {
				setTimeout(this.getData, 0)
			}, 60000)
			// this.getData();
		},
		methods:{
			getData: function() {
				$.ajax({
					type: "get",
					url: "http://localhost:8082/wybx/getData",
					success: function (msg) {
						// console.log(msg);
						content.tableData = msg;
						console.log(content.tableData);
					},
					error: function (msg) {
						console.log(msg);
					}
				});
				// $("#info_submit").attr("data-dismiss", "modal");
			},
		}
	})
</script>

</html>
